<template>
  <div class="fenlei">
    <van-search
      disabled
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      @click="goToPopup"
    />
    <transition name="slide">
      <router-view></router-view>
    </transition>
    <!-- fenlei -->
    <div class="fenl">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="item in categoryList"
          :key="item.id"
          :title="item.name"
          @click="selectIt(item.name)"
        />
      </van-sidebar>
      <ul>
        <div v-for="item in categoryList" :key="item.id" v-show="item.name==name">
          <img v-lazy="item.banner_url"  height="140px" width="95%" />
          <h5>{{ item.front_desc }}</h5>
        </div>
        <!-- 居家分类 -->
        <div class="mytitle">
          <span></span>
          <h3>{{ name }}</h3>
        </div>
        <!-- 列表 -->
        <!-- <van-list v-model="loading"> 
           <van-grid>
            <van-grid-item
             v-for="item in categoryList[0].subCategoryList"
              :key="item.id"
            >
            </van-grid-item>
          </van-grid>
        </van-list> -->
        <!-- 列表 -->
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in newCategory"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />
        </van-grid>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      onLoad: [],
      list: [],
      subCategoryList: [],
      name: "居家",
      loading: false,
      activeKey: 0,
      banner_url:
        "http://yanxuan.nosdn.127.net/92357337378cce650797444bc107b0f7.jpg",
      front_desc: "回家，放松身心",
    };
  },
  computed: {
    ...mapGetters(["categoryList"]),
    newCategory(){
      for(let i=0;i<this.categoryList.length;i++){
        if(this.categoryList[i].name==this.name){
          return this.categoryList[i].subCategoryList;
        }
      };
      
    }
  },
  methods: {
    goToPopup() {
      this.$router.push("/category/popup");
    },
    selectIt(name,front_desc,banner_url,subCategoryList) {
      this.name = name;
      this.front_desc=front_desc;
      this.banner_url=banner_url;
      this.subCategoryList=subCategoryList;
    },
  },
  created() {
    if (localStorage.getItem("userToken")) {
    } else {
      this.$toast.loading({
        message: "请先登录...",
        forbidClick: true,
      });
      this.$store.commit("CHANGEISLOGINED", false);
      this.$router.push({
        path: "/user",
      });
    }
  },

  mounted() {
      this.$store.dispatch("getHomeDB");
  },
};
</script>

<style lang = "less" scoped>
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
/* 分类 */
.fenl {
  width: 100%;
  background-color: #fff;
  height: 90vh;
  display: flex;
  .van-sidebar {
    width: 20%;
    background-color: #f7f8fa;
  }
  ul {
    width: 80%;
    div {
      width: 100%;
      position: relative;
      img {
        margin: 0 7px;
        border-radius: 5px;
        box-shadow: 0 0 6px #000;
        filter: brightness(0.6);
      }
      h5 {
        font-weight: normal;
        width: 100%;
        color: #fff;
        position: absolute;
        top: 48%;
        left: 0%;
        z-index: 222;
        text-align: center;
      }
    }
    .mytitle {
      width: 100%;
      height: 50px;
      position: relative;
      background: #fff;
      font-size: 16px;
      span {
        width: 50%;
        height: 2px;
        background-color: #ccc;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      h3 {
        font-weight: normal;
        width: 30%;
        height: 40px;
        background-color: #fff;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        line-height: 40px;
        text-align: center;
        color: #000;
      }
    }
  }
}
</style>